<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt: How to use Wire and Terminals definitions</title>
  
<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../lib/yui/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="../lib/yui/reset/reset-min.css" />

<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>

<!-- Excanvas -->
<!--[if IE]><script type="text/javascript" src="../lib/excanvas.js"></script><![endif]-->

<!--jQuery-->
<script type="text/javascript" src="../../jquery.min.js"></script>

<!-- WireIt -->
<script type="text/javascript" src="../js/WireIt.js"></script>
<script type="text/javascript" src="../js/CanvasElement.js"></script>
<script type="text/javascript" src="../js/Wire.js"></script>
<script type="text/javascript" src="../js/Terminal.js"></script>
<link rel="stylesheet" type="text/css" href="../css/WireIt.css" />

<style>

div.WireIt-Terminal {
	margin: 20px 8px;
}

div.blockBox {
	width: 200px;
	height: 200px;
	margin: 30px;
	float: left;
	position: relative;
	z-index: 5;
	/*background-color: rgb(255,200,200);*/
	border: 1px solid #aaa;
	opacity: 0.8;
	padding: 10px;
	font-weight: bold;
}

</style>
<script type="text/javascript">
jQuery(function(){
	var block = YAHOO.util.Dom.get('block');
	


});
window.onload = function() {
	var block = YAHOO.util.Dom.get('block');

	new WireIt.Terminal(block, { 
		nMaxWires: 1,
		name:"test1",
		wireConfig: {drawingMethod: "straight"},
		ddConfig: {
			type: 'q1, answer',
			allowedTypes: 'q1, value'
		},		
		offsetPosition:[30,30] });

	new WireIt.Terminal(block, {  
		nMaxWires: 1,
		name:"test2",
		wireConfig: { drawingMethod: "straight"},
		ddConfig: {
			type: 'q1, answer',
			allowedTypes: 'q1, value'
		},
		offsetPosition:[100,30] });

	new WireIt.Terminal(block, {  
        nMaxWires: 1,
		name:"test3",
		wireConfig: { drawingMethod: "straight"},
		ddConfig: {
			type: 'q1, value',
			allowedTypes: 'q1, answer'
		},
		offsetPosition:[30,100] });

	new WireIt.Terminal(block, { 
		nMaxWires: 1,
		name:"test4",
		wireConfig: { drawingMethod: "straight"},
		ddConfig: {
			type: 'q1, value',
			allowedTypes: 'q1, answer'
		},
		offsetPosition:[100,100] });
	
};
</script>

 </head>
 <body>

	<p style="margin: 30px;"><a href="../index.html">&lt; Back</a></p>
	<p style="margin: 5px 30px;">This page presents the various options on the terminals and wires. Try to create some wires from each terminal. Look at the source to see how to use them.</p>

	<div id='block'  class="blockBox">

	</div>
	


 </body>
</html>